"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native"
import { theme } from "../../constants/theme"
import PhoneticDetailSheet from "./PhoneticDetailSheet"

// 字母数据
const LETTER_DATA = [
    {
        letter: "b",
        totalPronunciations: 1,
        phoneticSymbols: [{ symbol: "b", frequency: 320 }],
        examples: [
            {
                word: "book",
                phonetic: "bʊk",
                partOfSpeech: "n",
                meaning: "书",
                targetLetter: "b",
            },
            {
                word: "baby",
                phonetic: "ˈbeɪbi",
                partOfSpeech: "n",
                meaning: "婴儿",
                targetLetter: "b",
            },
        ],
    },
    {
        letter: "c",
        totalPronunciations: 2,
        phoneticSymbols: [
            { symbol: "k", frequency: 280 },
            { symbol: "s", frequency: 120 },
        ],
        examples: [
            {
                word: "cat",
                phonetic: "kæt",
                partOfSpeech: "n",
                meaning: "猫",
                targetLetter: "c",
            },
            {
                word: "city",
                phonetic: "ˈsɪti",
                partOfSpeech: "n",
                meaning: "城市",
                targetLetter: "c",
            },
        ],
    },
    {
        letter: "d",
        totalPronunciations: 1,
        phoneticSymbols: [{ symbol: "d", frequency: 310 }],
        examples: [
            {
                word: "dog",
                phonetic: "dɒɡ",
                partOfSpeech: "n",
                meaning: "狗",
                targetLetter: "d",
            },
            {
                word: "day",
                phonetic: "deɪ",
                partOfSpeech: "n",
                meaning: "天",
                targetLetter: "d",
            },
        ],
    },
    {
        letter: "f",
        totalPronunciations: 1,
        phoneticSymbols: [{ symbol: "f", frequency: 180 }],
        examples: [],
    },
    {
        letter: "g",
        totalPronunciations: 2,
        phoneticSymbols: [
            { symbol: "ɡ", frequency: 150 },
            { symbol: "dʒ", frequency: 90 },
        ],
        examples: [],
    },
    {
        letter: "h",
        totalPronunciations: 1,
        phoneticSymbols: [{ symbol: "h", frequency: 160 }],
        examples: [],
    },
]

// 辅音分组数据
const CONSONANT_GROUPS = {
    b: [
        {
            symbol: "b",
            description: "清辅音，发音时双唇闭拢，声带振动",
            examples: ["book", "baby", "ball", "big"],
        },
    ],
    c: [
        {
            symbol: "k",
            description: "在a, o, u前通常发[k]",
            examples: ["cat", "come", "cut"],
        },
        {
            symbol: "s",
            description: "在e, i, y前通常发[s]",
            examples: ["city", "cent", "cycle"],
        },
    ],
    d: [
        {
            symbol: "d",
            description: "清辅音，舌尖抵上齿龈，声带振动",
            examples: ["dog", "day", "door", "desk"],
        },
    ],
}

export default function BasicConsonantsTab() {
    const [selectedLetter, setSelectedLetter] = useState<string | null>(null)
    const [selectedLetterData, setSelectedLetterData] = useState<any>(null)

    const handleLetterPress = (letter: string) => {
        setSelectedLetter(letter)
        const letterData = LETTER_DATA.find((item) => item.letter === letter)
        setSelectedLetterData(letterData)
    }

    const playAudio = (word: string) => {
        // Simulate audio playback
        console.log(`Playing audio for: ${word}`)
    }

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
            {/* Letter Grid */}
            <View style={styles.letterGrid}>
                {LETTER_DATA.map((item, index) => (
                    <TouchableOpacity
                        key={index}
                        style={styles.letterItem}
                        onPress={() => handleLetterPress(item.letter)}
                        activeOpacity={0.7}
                    >
                        <Text style={styles.letterText}>{item.letter}</Text>
                        <Text style={styles.letterCount}>{item.totalPronunciations}</Text>
                    </TouchableOpacity>
                ))}
            </View>

            {/* Consonant Groups */}
            {Object.entries(CONSONANT_GROUPS).map(([letter, items]) => (
                <View key={letter} style={styles.group}>
                    <Text style={styles.groupTitle}>字母 {letter}</Text>
                    {items.map((item, index) => (
                        <View key={index} style={styles.phoneticItem}>
                            <View style={styles.symbolContainer}>
                                <Text style={styles.symbol}>[{item.symbol}]</Text>
                            </View>
                            <View style={styles.contentContainer}>
                                <Text style={styles.description}>{item.description}</Text>
                                <View style={styles.examplesContainer}>
                                    {item.examples.map((word, wordIndex) => (
                                        <TouchableOpacity key={wordIndex} style={styles.wordButton} onPress={() => playAudio(word)}>
                                            <Text style={styles.wordText}>{word}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </View>
                            </View>
                        </View>
                    ))}
                </View>
            ))}

            <PhoneticDetailSheet
                visible={!!selectedLetter}
                onClose={() => {
                    setSelectedLetter(null)
                    setSelectedLetterData(null)
                }}
                letter={selectedLetter || ""}
                phoneticData={selectedLetterData}
            />
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    letterGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        padding: theme.spacing.md,
        gap: theme.spacing.sm,
    },
    letterItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        width: "30%",
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    letterText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    letterCount: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        opacity: 0.7,
    },
    group: {
        marginBottom: theme.spacing.md,
        paddingHorizontal: theme.spacing.md,
    },
    groupTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.sm,
    },
    phoneticItem: {
        flexDirection: "row",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        marginBottom: theme.spacing.sm,
        padding: theme.spacing.md,
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    symbolContainer: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    symbol: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    contentContainer: {
        flex: 1,
    },
    description: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.xs,
    },
    examplesContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.xs,
    },
    wordButton: {
        backgroundColor: "rgba(91, 142, 244, 0.05)",
        paddingHorizontal: theme.spacing.sm,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
    },
    wordText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.black,
    },
})

